import React, { useState } from 'react'
import { Form, Input, Button, Select, Table, Row, Col } from 'antd';

const { Option } = Select;

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

/**
 * 子组件-表单
 * @param add [Function]
 * @returns 
 */

class SForm extends React.Component {
    // const [form] = Form.useForm();
    formRef = React.createRef();
    // 添加
    btnQuery = async () => {
        const values = this.formRef.current.getFieldsValue();
        this.props.add(values);
        this.formRef.current.resetFields();//点击添加，同时清空
    };
    //   重置
    onReset = () => {
        this.formRef.current.resetFields();
    };
    render() {
        return (
            <div>
                <h1>Class Component</h1>
                <Form {...layout} ref={this.formRef} name="control-hooks">
                    <Row>
                        <Col span={8}>
                            <Form.Item name="userName" label="用户名称">
                                <Input placeholder='请输入用户名称' />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item name="userStatus" label="用户状态">
                                <Select>
                                    <Option value='up'>上线</Option>
                                    <Option value='down'>下线</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item>
                                <Button onClick={this.btnQuery} type="primary" htmlType="submit">
                                    添加
                                </Button>
                                <Button htmlType="button" onClick={this.onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

            </div>
        )
    }
}


/**
* 子组件-表格
* @param dataList 表格数据
* @returns 
*/


class STable extends React.Component {
    render() {
        const { dataList } = this.props;
        const columns = [
            {
                title: '用户姓名',
                dataIndex: 'userName',
                key: 'userName'
            },
            {
                title: '用户状态',
                dataIndex: 'userStatus',
                key: 'userStatus',
                render: (record) => record === 'up' ? '上线' : '下线'
                //  等价于
                //   function(record){
                //       if(record === 'up')
                //         return '上线';
                //       else
                //         return '下线';  
                //   }
            }
        ];
        return (

            <Table dataSource={dataList} columns={columns} rowKey={(record) => record?.lendth + 1} />

        )
    }
}

export default class FormClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableData: [],
        }
    }

    /**
   * 添加方法
   * @param {*} values 表单参数
   */
    add = (values) => {
        let a = this.state.tableData.concat([values])
        this.setState({
            tableData: a,
        });
    }

    render() {
        return (
            <div>
                <div style={{ marginTop: 40 }}>
                    <SForm add={this.add} />
                </div>
                <div style={{ padding: 20 }}>
                    <STable dataList={this.state.tableData} />
                </div>
            </div>
        )
    }
}


